<template>
    <div class="category-dialog">
        <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="45%" :modal-append-to-body="false" :before-close="handleClose">
            <el-form :model="form">
                <el-form-item label="菜单编号" v-if='form.moduleId==null'>
                    <el-input v-model="form.moduleId" auto-complete="off" ></el-input>
                </el-form-item>

                <el-form-item label="菜单编号" v-else>
                    <el-input v-model="form.moduleId" auto-complete="off" :disabled="true" ></el-input>
                </el-form-item>

                <el-form-item label="菜单名称" >
                    <el-input v-model="form.moduleName" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="资源类型">
                    <el-select  v-model="form.moduleType"  placeholder="请选择资源类型" v-if='form.moduleId==null'>
                        <el-option label="菜单" value="1"></el-option>
                        <el-option label="按钮" value="0"></el-option>
                    </el-select>
                    <el-select  v-model="form.moduleType"  :disabled="true" v-else>
                         <el-option label="菜单" value="1"></el-option>
                         <el-option label="按钮" value="0"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="资源对应URL" v-if='form.moduleType==0' >
                   <el-input v-model="form.linkUrl" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="排序号" >
                   <el-input v-model="form.sortNo" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="菜单描述" >
                    <el-input v-model="form.moduleRemark" type="textarea" :rows="3" placeholder="请输入备注说明"></el-input>
                </el-form-item>




            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'CategoryEdit',
        props: {
            dialogFormVisible:Boolean,
            data: [Object,Boolean],
            title:String,
            departTree:Array,
        },
        data() {
            return {
              props: {
                value:'moduleId',
                label: 'moduleName',
                children: 'children'
              },
                form: {
                  moduleId:null,
                  moduleName:'',
                  parentId:'',
                  moduleRemark:'',
                  linkUrl:'',
                  sortNo:null,
                  moduleType:'',
                  isValidate:'',
                },
              btnLoading:false,
            }
        },
        watch: {
            'data': {
                handler: function () {
                    if(this.data){
                        for (let k in this.form){
                          this.form[k] = this.data[k];
                        }
                    }else {
                      for (let k in this.form){
                        this.form[k] = '';
                      }
                    }
                },
                deep: true
            }
        },
        methods: {
          handleChange(){},
            btnOk(){
                let errorMsg = false;
                let formData = this.form;

                if(formData.moduleName && formData.moduleName.length <=2) errorMsg = '菜单名称必须大于2个字符';

                if(errorMsg) {
                    this.$message.error(errorMsg);
                    return ;
                }
                handleClose();

                this.$emit('val-change',this.form);
                this.btnLoading = true;
                setTimeout(()=>{this.btnLoading = false},1000)
            },

            handleClose(){

               let elInputs=document.querySelectorAll(".el-input__inner");
               for(var i=0;i<elInputs.length;i++){
               }


                    //1.首先我们要拿到input的父class(input)
                      //当我们设置disabled属性的时候，父集的class设置成 input el-input is-disabled，首先我们改变父集的class,把父集改成可编辑状态，才能修改input的属性
                    const parent = document.querySelector(".input");
                    parent.className = "input el-input ";//改变父集的class,把父集改成可编辑状态，
                    //2.在设置input属性
                      //获取input
                    const input = document.querySelector(".input input");
                      //设置input的属性为false
                      input.disabled = false;
               this.$emit('cancel')
            },

        },
        components: {

        }
    }
</script>
<style lang="less">
    .category-dialog{
        .el-cascader{
            width: 100%;
        }
    }
</style>
